<template>
  <view class="page">
    <view v-if="$data.info">
      <!-- 基本信息 -->
      <view class="top padding-bottom">
        <view class="basic">
          <view class="basic_img">
            <image :src="$data.info._picurl" />
          </view>
          <view class="basic_content">
            <view class="basic_content--title">
              {{ $data.info.serviceTitle }}
            </view>
            <view class="basic_content--price text-price">
              {{ $data.info.firstTotalPrice }}
            </view>
          </view>
        </view>
      </view>
      <!-- 投诉目标 -->
      <view class="row-select">
        <view class="title">投诉目标</view>
        <view class="content" @tap="() => ($data.targetShow = true)">
          <view class="content--check">
            <text v-if="params.type" class="text-main-color">
              {{ $data.targetName }}
            </text>
            <text v-else class="text-gray">请选择投诉目标</text>
          </view>
          <view class="content--icon">
            <image :src="ImgIconRightGray" />
          </view>
        </view>
      </view>
      <!-- 投诉原因 -->
      <view class="row-select">
        <view class="title">投诉原因</view>
        <view class="content" @tap="() => ($data.reasonShow = true)">
          <view class="content--check">
            <text v-if="params.complaintCategoryId" class="text-main-color">
              {{ $data.reasonName }}
            </text>
            <text v-else class="text-gray">请选择投诉原因</text>
          </view>
          <view class="content--icon">
            <image :src="ImgIconRightGray" />
          </view>
        </view>
      </view>
      <!-- 投诉人员 -->
      <view
        v-if="params.type == complaintCategoryType.worker"
        class="row-select"
      >
        <view class="title">投诉人员</view>
        <view class="content" @tap="() => ($data.workerShow = true)">
          <view class="content--check">
            <text v-if="params.workerId" class="text-main-color">
              {{ $data.workerName }}
            </text>
            <text v-else class="text-gray">请选择投诉人员</text>
          </view>
          <view class="content--icon">
            <image :src="ImgIconRightGray" />
          </view>
        </view>
      </view>
      <!-- 投诉说明 -->
      <view class="card margin-top">
        <view class="card_title margin-bottom">备注</view>
        <up-textarea
          v-model="params.content"
          placeholder="请输入投诉说明"
          :height="100"
          :maxlength="150"
          border="surround"
          count
        ></up-textarea>
        <!-- 上传图片 -->
        <view class="row-column">
          <view class="row-column_title"> 上传图片(最多上传8张图片) </view>
          <view class="row-column_content">
            <up-upload
              :fileList="$data.fileList"
              :previewFullImage="true"
              :deletable="true"
              @afterRead="juAfterRead($event, 'fileList')"
              @delete="juDeletePic($event, 'fileList')"
              name="eventImages"
              multiple
              width="24vw"
              height="24vw"
              :maxCount="8"
              @oversize="oversize"
              accept="image"
              :maxSize="uploadSize"
            >
              <view class="upload-custom">
                <image :src="ImgIconPhotoGray" mode="scaleToFill" />
              </view>
            </up-upload>
          </view>
        </view>
      </view>
      <view class="foot foot_box">
        <view class="btn btn_save" @tap="onSave">提交申请</view>
      </view>
    </view>
    <PopupCategory
      v-model:show="$data.targetShow"
      :list="$data.actionList"
      @confirm="onCategoryConfirm"
    />
    <PopupReason
      v-model:show="$data.reasonShow"
      :list="$data.reasonList"
      @confirm="onReasonConfirm"
    />
    <PopupWorker
      v-model:show="$data.workerShow"
      :list="$data.workerList"
      @confirm="onWorkerConfirm"
    />
    <PopupLogin />
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick } from "vue";
import { onLoad, onShow, onHide, onReady } from "@dcloudio/uni-app";
import BasicConfig from "@/utils/config";
import { getOrderDetail } from "../../api/Interface/order";
import {
  getComplaintCategoryList,
  subComplaint,
} from "../../api/Interface/complain";
import { orderType } from "../../enums/order";
import errorCode from "../../utils/http/errorCode";
import { useImgSrc } from "../../hooks/useImg";
import { ImgIconRightGray, ImgIconPhotoGray } from "../../utils/iconMap";
import { oversize, uploadSize } from "../../utils/utils";
import { useAfterRead, useDeletePic } from "../../hooks/useUpload";
import { complaintCategoryType } from "../../enums/complain";
import PopupCategory from "../components/Complain/PopupCategory.vue";
import PopupReason from "../components/Complain/PopupCategory.vue";
import PopupWorker from "../components/Complain/PopupWorker.vue";
import { error } from "../../uni_modules/uview-plus/libs/function";

const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $data = reactive({
  localNo: "", // 订单号
  orderServiceId: "", // 订单id
  orderType: null, // 1.日常订单 2.酒店订单
  info: null,
  actionList: [], // 投诉类型
  reasonList: [], // 投诉原因
  workerList: [], // 投诉人员
  fileList: [],
  targetShow: false, // 投诉目标show
  reasonShow: false, // 投诉原因show
  workerShow: false, // 投诉人员
  targetName: "", // 投诉目标name
  reasonName: "", // 投诉原因name
  workerName: "", // 投诉人员name
});
const params = reactive({
  complaintCategoryId: "", // 投诉类型id(投诉原因)
  type: null, // 类型1=服务2=劳动者3=平台
  workerId: "", // 保洁id，type=2必传
  domesticServiceId: "", // 订单服务id，type=1必传
  content: "", // 投诉说明
});
onLoad((options) => {
  $data.localNo = options.localNo;
  $data.orderServiceId = options.orderServiceId;
  $data.orderType = options.orderType;
  params.domesticServiceId = options.domesticServiceId;
  init();
});
const init = () => {
  // 获取订单详情
  getOrderDetail({
    localNo: $data.localNo,
    orderServiceId: $data.orderServiceId,
  }).then((res) => {
    if (res.code === errorCode.success) {
      $data.info = res.data;
      if ($data.info) {
        $data.info._picurl = useImgSrc($data.info.picurl);
      }
    }
  });
  // 获取投诉类型
  getComplaintCategoryList({
    localNo: $data.localNo,
    orderType: $data.orderType,
  }).then((res) => {
    if (res.code === errorCode.success) {
      $data.actionList = res.data.categoryList;
      $data.workerList = res.data.workerList;
    }
  });
};
const onSave = () => {
  if (params.type == "" || params.type == null || params.type == undefined) {
    BasicConfig.toast("请选择投诉目标");
    return;
  }
  if (
    params.type == complaintCategoryType.service &&
    !params.domesticServiceId
  ) {
    BasicConfig.toast("服务id不可为空");
    return;
  }
  if (
    params.complaintCategoryId == "" ||
    params.complaintCategoryId == null ||
    params.complaintCategoryId == undefined
  ) {
    BasicConfig.toast("请选择投诉原因");
    return;
  }
  if (params.type == complaintCategoryType.worker && !params.workerId) {
    BasicConfig.toast("请选择投诉人员");
    return;
  }
  if (!params.content) {
    BasicConfig.toast("请输入投诉说明");
    return;
  }
  uni.showModal({
    content: "确认提交?",
    success: (success) => {
      if (success.confirm) {
        const imgs = $data.fileList.map((item) => {
          return item.url;
        });
        const query = Object.assign({}, params, {
          img: $data.fileList.map((m) => m.file.data[0].url).join(","),
        });
        console.log("投诉 query", query);
        subComplaint(query).then((res) => {
          BasicConfig.toast(res.msg);
          if (res.code === errorCode.success) {
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1000);
          }
        });
      }
    },
  });
};
/** 选择投诉目标回调 */
const onCategoryConfirm = (e) => {
  if (e) {
    if (
      params.type != null &&
      params.type != "" &&
      params.type != undefined &&
      e.complaintCategoryId != params.type
    ) {
      onReasonConfirm(null);
      onWorkerConfirm(null);
    }
    $data.targetName = e.categoryName;
    params.type = e.complaintCategoryId;
    $data.reasonList = e.sonArr;
  }
};
/** 选择投诉原因回调 */
const onReasonConfirm = (e) => {
  if (e) {
    params.complaintCategoryId = e.complaintCategoryId;
    $data.reasonName = e.categoryName;
  } else {
    params.complaintCategoryId = "";
    $data.reasonName = "";
  }
};
/** 选择投诉人员回调 */
const onWorkerConfirm = (e) => {
  if (e) {
    params.workerId = e.workerId;
    $data.workerName = e.nickname;
  } else {
    params.workerId = "";
    $data.workerName = "";
  }
};
// 删除图片
const juDeletePic = (event, key) => {
  $data[key] = useDeletePic(event, $data[key]);
};
const juAfterRead = async (event, key) => {
  const { data } = await useAfterRead({
    event,
    fileList: $data[key],
    formData: { user: "test" },
    key: "file",
  });
  if (data) {
    data.forEach((item) => {
      if (item.file) {
        item.url = item.file.url;
      }
    });
    $data[key] = data;
  }
  console.log("$data.fileList", uni.$u.deepClone($data.fileList));
};
</script>

<style lang="scss" scoped>
@import "../static/style/order/detail/common.scss";
.row-select {
  padding: 30rpx;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
  .title {
    font-size: 34rpx;
    color: #333333;
  }
  .content {
    display: flex;
    align-items: center;
    &--check {
      font-size: 34rpx;
    }
    &--icon {
      width: 16rpx;
      height: 30rpx;
      margin-left: 20rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.row-column {
  // margin-bottom: 30rpx;
  padding: 30rpx 0;
  &:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
  }
  &_title {
    font-weight: 700;
    font-size: 34rpx;
  }
  &_content {
    margin-top: 30rpx;
    font-size: 32rpx;
    .address {
      image {
        width: 16rpx;
        height: 30rpx;
        margin-left: 30rpx;
      }
    }
    .room-style {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      &_item {
        width: calc(96% / 3);
        padding: 20rpx;
        background: #f7f8fa;
        border-radius: 20rpx;
        text-align: center;
        margin-bottom: 30rpx;
      }
      &_item--active {
        background: $main-color;
        color: #ffffff;
      }
    }
  }
}
.upload-custom {
  background: #f1f1f1;
  border: 1px dashed #aaaaaa;
  border-radius: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24vw;
  height: 24vw;
  image {
    width: 100%;
    height: 100%;
  }
}
</style>
